<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	.modal-dialog {
		width: 850px;
	}
	.img-delete {
		background-color: #000;
		opacity: 0.3;
	}
	#save-image {
		margin-right: 200px;
	}
	#upload-img {
		margin-right: 10px;
	}
	#cboxClose {
		text-indent: 0;
		font-size: 50px;
		font-weight: bold;
		margin-top: 10px;
		color: red;
	}
</style>

<div class="col-xs-12 mt10">
	<?php foreach($albumCategory as $category): ?>
	<div class="page-header">
		<h1>
			<?=$category['album_category_name']?>
			<small>
				<a class="blue ml10 show-img-dialog" href="#modal-image" data-toggle="modal" data-id="" data-image="" data-title="" data-category="<?=$category['id']?>" data-sort="" data-recommend="0">
					<i class="fa fa-image"></i> 上传图片
				</a>
			</small>
		</h1>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div>
				<ul class="ace-thumbnails clearfix">
					<?php foreach($category['album'] as $image): ?>
					<li>
						<a href="<?=$image['image_link']?>" title="<?=$image['image_desc']?>" data-rel="colorbox" class="cboxElement">
							<img src="<?=$image['image_link']?>" width="150" height="150" class="fit-cover">
							<div class="text">
								<div class="inner"><?=$image['image_desc']?></div>
							</div>
						</a>
						<div class="tags">
							<?php if($image['image_recommend']): ?>
							<span class="label-holder">
								<span class="label label-info">推荐</span>
							</span>
							<?php endif; ?>
						</div>

						<div class="tools tools-bottom">
							<a href="#modal-image" class="green show-img-dialog" data-toggle="modal" data-id="<?=$image['id']?>" data-image="<?=$image['image_link']?>" data-title="<?=$image['image_desc']?>" data-category="<?=$image['category_id']?>" data-sort="<?=$image['image_sort']?>" data-recommend="<?=$image['image_recommend']?>">
								<i class="ace-icon fa fa-edit"></i>
							</a>
							<a href="javascript:;" class="red image-delete" data-id="<?=$image['id']?>">
								<i class="ace-icon fa fa-trash"></i>
							</a>
						</div>
					</li>
					<?php endforeach; ?>
				</ul>
			</div>
		</div>
	</div>
	<?php endforeach; ?>
</div>
<!-- 图片上传弹窗 -->
<div id="modal-image" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					相册图片管理
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="image-form">
							<input type="hidden" name="id" />
							<input type="hidden" name="class_id" value="<?=$classId?>" />
							<input type="hidden" name="category_id" value="" />
							<input type="hidden" name="image_link" value="" />
							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right">图片标题：</label>
								<div class="col-sm-7">
									<input class="form-control" type="text" name="image_title" placeholder="请填写图片标题"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right">图片排序：</label>
								<div class="col-sm-7">
									<input class="form-control" type="text" name="image_sort" placeholder="选填。请填写图片排序，根据序号从高往低排"/>
								</div>
							</div>
							<!-- <div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">图片上传：</label>
								<div class="col-sm-6">
									<a href="javascript:;" id="upload-img">
										<img class="fit-cover" src="" width="160" height="160" />
									</a>
								</div>
							</div> -->
							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right">图片上传：</label>
								<div class="col-sm-10" id="imgs" style="display: flex;flex-wrap: wrap;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;">
									<a href="javascript:;" id="upload-img">
										<img class="plus fit-cover" src="" width="130" height="130" />
									</a>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right">推荐首页：</label>
								<div class="col-sm-7">
									<select name="image_recommend" class="form-control">
										<option value="0">否</option>
										<option value="1">是</option>
									</select>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-image">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">

	$(function(){
		var imageForm = $("#image-form");
		var uploadTarget = $("#upload-img");

		// 显示弹窗
		$(".show-img-dialog").click(function(){
			var imgLink = $(this).data("image");

			uploadTarget.find("img").attr("src", imgLink ? imgLink : '<?=$staticAdminUrl?>assets/images/upload.png');
			imageForm.find("[name=id]").val($(this).data("id"));
			imageForm.find("[name=category_id]").val($(this).data("category"));
			imageForm.find("[name=image_link]").val(imgLink);
			imageForm.find("[name=image_title]").val($(this).data("title"));
			imageForm.find("[name=image_sort]").val($(this).data("sort"));
			imageForm.find("[name=image_recommend]").val($(this).data("recommend"));
			// 是否多图上传
			var multiple = true;
			if(imgLink) {
				// 修改时不允许多图上传
				multiple = false;
			}
			setTimeout(function(){
				uploadTarget.uploader({
					"multiple": multiple, // 多图上传
					"server":  '<?=UP_FORM_URL?>',
					"authorization": "<?=$signature?>",
					"policy": "<?=$policy?>",
					"callback": function(response) {
						var imgFile = "<?=UP_URL?>" + response.url;
						if(multiple) {
							// 多图上传
							$("#imgs").append(
								'<div class="img-pending" style="position:relative;cursor:pointer;margin-right: 10px;">\
									<img src="'+ imgFile +'" width="130" height="130">\
									<div class="img-pending-delete" style="display:none;width:130px;height:130px;position:absolute;top:0;left:0;background: rgba(0,0,0,0.5);text-align:center;line-height:130px;">\
										<i class="ace-icon fa fa-trash fa-2x red"></i>\
									</div>\
								</div>');
						} else {
							uploadTarget.find("img").attr("src", imgFile);
						}
					}
				});
			}, 200)
		})
		// 上传图片
		$("#save-image").click(function(){
			// imageForm.submit();
			var arr = [];
			$("#imgs img").each(function() {
				var src = $(this).attr("src");
				// 过滤调upload.png
				if(src.indexOf("images/upload.png") == -1) {
					arr.push(src);
				}
			});
			$("[name=image_link]").val(arr.join(","));
			imageForm.submit();
		})
		var submitImgUrl = "<?=admin_url('contents/save_honor_action')?>";
		form_submit(imageForm, submitImgUrl, function(res) {
			tips_alert(res.msg, res.success, function(){
				if(res.success) window.location.reload();
			});
		})

		// 删除图片
		$("body").on("click", ".image-delete", function(e){
			var id = $(this).data("id");
			layer.confirm('确定删除这种图片吗？', function(){
				// 提交数据
				var postUrl = "<?=admin_url('contents/delete_honor_image')?>";
				var postData = {"id": id};
				ajax_post(postUrl, postData, function(res){
					window.location.reload();
				})
			});
		})
		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition:true,
			scalePhotos:true,
			scrolling:false,
			previous:'<i class="ace-icon fa fa-arrow-left"></i>',
			next:'<i class="ace-icon fa fa-arrow-right"></i>',
			close:'&times;',
			current:'',
			maxWidth:'100%',
			maxHeight:'100%',
			onOpen:function(){
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed:function(){
				document.body.style.overflow = $overflow;
			},
			onComplete:function(){
				$.colorbox.resize();
			}
		};
		$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		$("body").on("mouseover", ".img-pending", function() {
			$(this).children(".img-pending-delete").show();
		});
		$("body").on("mouseout", ".img-pending", function() {
			$(this).children(".img-pending-delete").hide();
		});
		$("body").on("click", ".img-pending", function() {
			that = $(this);
			layer.confirm("确认删除该图？", function(index) {
				layer.close(index);
				that.remove();
			});
		})
	})
</script>